/*!
 * Copyright 2019 WeBank
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

@import '@/common/style/variables.scss';

.resource-simple-content {
    height: 400px;
    .queue-manager {
        position: $relative;
        width: 100%;
        height: 100%;
        .queue-manager-select-warpper {
            position: $absolute;
            top: 0;
            right: 0;
            .queue-manager-select {
                width: 200px;
            }
        }
        .queue-manager-title {
            height: 32px;
            line-height: 32px;
            font-size: $font-size-base;
            font-weight: bold;
        }
        .queue-manager-used {
            margin-bottom: 10px;
            .queue-manager-circle-warpper {
                padding: 20px;
                display: flex;
                justify-content: center;
                .queue-manager-circle {
                    margin-right: 30px;
                }
            }
        }
        .queue-manager-top {
            .queue-manager-top-content {
                height: 180px;
                overflow-y: auto;
            }
            .queue-manager-item {
                height: 20px;
                line-height: 20px;
                display: flex;
                margin: 8px 0 8px 20px;
                span {
                    display: inline-block;
                }
                .queue-manager-name {
                    width: 80px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .queue-manager-total {
                    margin-left: 10px;
                }
                .queue-manager-status {
                    position: $relative;
                    width: 400px;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    font-size: 10px;
                    background: $background-color-base;
                    border-radius: 10px;
                    .queue-manager-status-busy {
                        position: $absolute;
                        left: 0;
                        background: $warning-color;
                        height: 100%;
                        border-radius: 10px;
                        z-index: 1;
                    }
                    .queue-manager-status-idle {
                        background: $success-color;
                        height: 100%;
                        border-radius: 10px;
                        position: $absolute;
                        z-index: 0;
                    }
                    .queue-manager-status-label {
                        position: $absolute;
                        right: 6px;
                        color: $tooltip-color ;
                    }
                }
            }
        }
    }
    .job-manager {
        height: 400px;
        overflow-y: auto;
        .job-manager-empty {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        .job-manager-type {
            .job-manager-title {
                height: 32px;
                line-height: 32px;
                font-size: $font-size-base;
                font-weight: bold;
            }
            .job-manager-item-wrapper {
                display: flex;
                align-items: center;
                height: 40px;
                line-height: 40px;
                margin: 2px 10px 2px 20px;
                position: $relative;
                cursor: pointer;
                background: $background-color-base;
                border: $border-width-base $border-style-base $tooltip-color ;
                &:hover {
                    background: $tooltip-color ;
                }
                &.actived {
                    background: $tooltip-color ;
                }
                .job-manager-item-icon {
                    padding: 10px;
                    &::before {
                        font-size: 24px;
                    }
                }
                .job-manager-item-label {
                    font-weight: bold;
                    width: 380px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .job-manager-item-progress-label {
                    position: $absolute;
                    right: 40px;
                }
                .job-manager-item-progress {
                    display: inline-block;
                    position: $absolute;
                    top: -1px;
                    left: 0;
                    height: 40px;
                    background: rgba(45, 140, 240, 0.3);
                }
                .job-manager-item-active {
                    background: rgba(0, 128, 0, 0.57);
                    color: $tooltip-color ;
                    position: $absolute;
                    top: -1px;
                    left: 0;
                    &::before {
                        font-size: 10px;
                    }
                }
                .job-manager-item-close {
                    position: $absolute;
                    right: 16px;
                    &:hover {
                        color: rgba(45, 140, 240, 0.3);
                    }
                }
            }
        }
    }
}
.task-manager {
    padding: 0 10px;
    .task-content {
        border: $border-width-base $border-style-base $border-color-split;
        box-shadow: $shadow-card;
        border-radius: 10px;
        color: $text-color ;
        margin: 5px 0;
        margin-bottom: 15px;
        padding: 0 0 10px;
        .item-title {
            font-size: $font-size-base;
            background: $primary-color;
            padding: 6px 20px;
            border-radius: 10px 0;
            display: inline-block;
            color: $tooltip-color ;
        }
    }
    .manager-li {
        padding: 6px 5px 6px 30px;
        display: flex;
        font-size: $font-size-small;
        margin: 6px 0;
        align-items: center;
        &:hover {
            background: $background-color-base;
        }
        .manager-li-title {
            text-align: center;
            margin-right: 10px;
            line-height: 32px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            border: $border-width-base $border-style-base $primary-color;
            border-left-width: 10px;
            border-radius: $border-radius-small;
            cursor: pointer;
            &.init {
                border-color: $subsidiary-color;
            }
            &.schedule {
                border-color: $pink-color
            }
            .item-label {
                width: 90px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                display: inline-block;
                text-decoration: underline;
            }
        }
        .item-center {
            width: 500px;
            .sql-text {
                max-width: 550px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        .item-delete {
            flex-basis: 30px;
            font-weight: bold;
            font-size: 20px;
            text-align: center;
            margin-left: 10px;
            cursor: pointer;
        }
    }
}
.header-tab {
    display: flex;
    justify-content: center;
}
.resource-simple-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    &.legendShow {
        justify-content: space-between;
    }
    .footer-legend {
        .footer-legend-point {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
        }
        .point-init {
            background-color: $subsidiary-color;
        }
        .point-schedule {
            background-color: $pink-color ;
        }
        .point-running {
            background-color: $primary-color;
        }
        .point-idle {
            background-color: $success-color;
        }
        .point-busy {
            background-color: $warning-color;
        }
        .point-starting {
            background-color: $primary-color;
        }
        .footer-legend-label {
            margin-right: 10px;
            display: inline-block;
        }
    }
}
// 引擎管理器样式
.engine-box {
    height: 100%;
    overflow-y: auto;
    position: $relative;
    .no-data {
        font-size: $font-size-base;
        font-weight: 600;
        font-family: "宋体";
        color: $text-color;
        position: $absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
    }
    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: $border-radius-base;
        box-shadow: $shadow-inset;
        background: $background-color-base;
    }
    &::-webkit-scrollbar-track {
        border-radius:$border-radius-base;
        box-shadow: $shadow-inset;
        background: $tooltip-color ;
    }
}
.engine-content {
    padding: 0 15px;
    .engine-header-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 10px;
        .data-type-title {
            font-size: 18px;
            font-weight: bold;
        }
        .classify {
            flex-basis: 30%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            >span {
                margin-right: 5px;
                width: 40px;
                font-size: $font-size-base;
            }
        }
    }
    .engine-list {
        display: flex;
        align-items: center;
        padding-left: 30px;
        .engline-name {
            flex-basis: 62px;
            font-size: 16px;
            margin-right: 20px;
        }
        .engine-ul {
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .engine-li {
                border: $border-width-base $border-style-base $border-color-base;
                border-radius: $border-radius-base;
                padding: 5px;
                position: $relative;
                width: 60px;
                height: 60px;
                margin: 8px 20px 8px 0;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;
                &:hover {
                    background-color: $background-color-base;
                    border-radius: $border-radius-base;
                    cursor: pointer;
                }
                &.active.yellow {
                    border: $border-width-base $border-style-base $yellow-color;
                    background-color: $background-color-base;
                }
                &.active.green {
                    border: $border-width-base $border-style-base $success-color;
                    background-color: $background-color-base;
                }
                &.active.blue {
                    border: $border-width-base $border-style-base $primary-color;
                    background-color: $background-color-base;
                }
                .engine-icon {
                    &::before {
                        font-size: 40px;
                    }
                }
                .engine-icon.yellow {
                    &::before {
                        color: $yellow-color;
                    }
                }
                .engine-icon.green {
                    &::before {
                        color: $success-color;
                    }
                }
                .engine-icon.blue {
                    &::before {
                        color: $primary-color;
                    }
                }
                .engine-right {
                    position: $absolute;
                    top: 0;
                    left: 0;
                    border-radius: 0 0 5px 0;
                    font-weight: bold;
                    &:before {
                        color: $background-color-base;
                    }
                    &.yellow {
                        background-color: $yellow-color;
                    }
                    &.green {
                        background-color: $success-color;
                    }
                    &.blue {
                        background-color: $primary-color;
                    }
                }
            }
        }
    }
}
